Setting Up a New React Project: The Options

Firat Atalay

5 min read

·

Just now

So as we just learned, in the real world we don’t just write React apps in a single JavaScript file without any tooling. So let’s now learn about the options that we have to set up a brand new React project.

And for now, the two most important options are the Create-React-App tool or a build tool called Vite.

So first, Create-React-App is basically a complete starter kit for React applications that was developed many years ago in order to make it really easy for developers to scaffold new React apps.

And what’s really nice about this is that all the common development tools are already preconfigured out of the box specifically for React. So an app created with Create-React-App automatically comes with a development server webpack for module bundling, and of course, important developer tools, which include a linter like ESLint, a code formatter like Prettier, a testing library like Jest, and of course, Fable for enabling the latest JavaScript features.

Now this all sounds great but the problem with Create-React-App is that, as I said in the beginning, it was developed many years ago. And so it uses some slow and kind of outdated technologies under the hood, and in particular, the webpack bundler. So the team behind Create-React-App has really stopped innovating, and therefore right now, the recommendation is to not use Create-React-App for real world projects anymore.

It is, however, still a perfectly fine way to get started quickly with a new React app for tutorials, courses, or simple experiments. And so therefore, we will actually use Create-React-App for most of the course, so for all the small learning projects that we’re gonna build together. So you might have read all the articles saying that Create-React-App is dead, and that you should never use it again. But that’s only true for building real apps. Again, for learning, it’s still 100% fine because you will not encounter the problems that large scale apps will face, like slow refresh times.

Now, if you do want to build real world applications with React, as we will do by the end of the course, then Vite is the perfect choice.

Now, Vite is actually quite different from Create-React-App as it’s basically simply a modern build tool. So a bit like a modern webpack but which happens to also contain a starter template for setting up brand new React applications. However, in a React app created with Vite, you will have to manually set up many important developer tools, such as ESLint, Prettier, a testing library, and so on. And the most annoying and painful of those is setting up ESLint to play nice with React. So that can be a bit of work and it can go wrong. And so this is the reason why I still recommend using Create-React-App for tutorials when we just want to get up and running as quickly as possible.

Now, if we have all this additional work to set up our tools, then why even use Vite in the first place?

Well, the reason is that it’s just extremely fast to automatically refresh the page when the code changes which is what we call hot module replacement. Also, bundling is extremely fast, too, which for large scale applications can really make a difference because when you have to wait one or two seconds for each page refresh, it can become really, really annoying over time. But with Vite, the page will update almost instantly each time that we save our code and want to see the changes on the screen.

So in summary, we will use Create-React-App for most small apps in this lectures and then move to Vite for the last two or three projects to make them a bit more real world and more modern as well.

Now, if you have spent any time looking at the React documentation, you might have read that the React team now advises developers to use a so-called React framework like Next.js or Remix to build new projects. So in fact, we have even more options to set up a new React project than the ones that we just talked about.

Now we’re gonna talk about what React frameworks are throughout the lectures, but for now, all you need to know is that a framework like Next.js contains solutions for things like routing, data fetching, and server side rendering, so things that React itself does not provide easily out of the box. So essentially, a React framework is a framework built on top of the React library and which is gonna make it even easier to build applications than with just vanilla React itself. And this sounds great, right?

Well, yeah, it kind of does, but only for some applications. However, many people, and that include me, think that telling developers to always immediately go for a React framework is not the best idea and not always necessary.

Vanilla React apps, so apps built only using React, still have a very important place, too. And so forcing this opinion on everyone seems kind of strange, but again, we will discuss this later on. Now, in any case, this advice only makes sense for building actual production ready products, but not for learning React, which is, of course, what we are trying to do in this course. So even if at some point you want to learn Next.js as well, of course you still need to learn React, itself, first. So all this is to say that you should not worry about this recommendation for now. For now, let’s just learn React and set up new projects with Create-React-App first and then with Vite in the bigger projects. And with all this being said, let’s now actually go create our very first real React application.